<template>
	<view class="orders" :class="orderList.length==0?'empty':''">
		<block v-if="orderList.length>0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item,index) in orderList" :key="index" @click="orderDetail(item)">
					<view class="top">
						<view class="left">
							<image src="@/static/my/jd_mp.png" mode=""></image>
							<text :class="item.status==3?'qx':''">景点门票</text>
						</view>
						<view class="right">
							<block v-if="item.status==0&&item.djsTime">
								<uCountDown @finish="finish(item)" :djsTime="item.djsTime" />
							</block>
							<block v-else>
								<text v-if="item.status==-3">已退款</text>
								<text v-if="item.status==-2">退款中</text>
								<text :class="oscConfig[item.status]" v-else>{{osConfig[item.status]}}</text>
							</block>
						</view>
					</view>
					<view class="content" @click="orderDetail(item)">
						<view class="title">{{item.scenicSpotName}}</view>
						<view style=" font-size: 24rpx; color: #AAAAAA; font-weight: Regular;margin-top: 30rpx;">
							数量/游客数量*{{item.qty}}
						</view>
						<view class="room_price">
							<view class="date">
								<text>游玩时间</text>
								<text>{{item.playDate}}</text>
							</view>
							<view class="price">
								<text :class="item.status==3?'qx':''">¥{{item.realityPay}}</text>
							</view>
						</view>
					</view>
					<!-- 已完成 -->
					<view class="btns" v-if="item.status==3">

						<view @tap="deleteOrder(item)">删除订单</view>
						<!-- <view @tap="goToAppraise(item)">评价</view> -->
						<view @tap="againReserve(item)">再次预订</view>
					</view>
					<!-- 待使用 -->
					<view class="btns" v-if="item.status==1">
						<view @tap="refund(item)">申请退订</view>
						<view @tap="againReserve(item)">再次预订</view>
					</view>
					<!-- 待支付 -->
					<view class="btns" v-if="item.status==0">
						<view @tap="cancelOrder(item)">取消订单</view>
						<view @tap="toPay(item)" style="color: #FFFFFF; background-color: #FF4141;">去支付</view>
					</view>
					<!-- 已退票 -->
					<view class="btns" v-if="item.status==-3">
						<!-- <view>开发票</view>	 -->
						<view @tap="deleteOrder(item)">删除订单</view>
						<view @tap="againReserve(item)">再次预订</view>
					</view>
					<view class="btns" v-if="item.status==-1">
						<!-- <view>开发票</view>	 -->
						<view @tap="deleteOrder(item)">删除订单</view>
						<view @tap="againReserve(item)">再次预订</view>
					</view>
				</u-list-item>
			</u-list>
		</block>
		<block v-else>
			<NoData style="margin: 0 100%;" />
		</block>
		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				mysearch: '',
				realityPay: null,
				orderList: [],
				pageIndex: 1,
				pageCount: 10,
				moreData: true,
				osConfig: {
					0: '待支付',
					1: '待使用',
					3: '已完成',
					'-1': '已取消',
				},
				oscConfig: {
					0: 's0',
					1: 's1',
				},
				fromList: {
					limit: 10,
					openId: 0,
					page: 1
				},
				tabIdx: 0,
				title: '温馨提示',
				showdelete: false,
				orderType: null,
				delId: null,
				contented: '您确定要删除吗？确定删除将不可撤回！',

			}
		},
		methods: {
			goToAppraise(item) {
				const obj = {
					guideId: item.id,
					orderCode: item.orderCode,
					sourceType: 1
				}

				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(obj)
				})
			},
			refund(item) {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/refund?id=' + item.orderCode
				})
			},
			orderDetail(item) {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/orderDetail?orderCode=' + item.orderCode + '&status=' + item
						.status
				})
			},
			changeStatus(index) {
				this.tabIdx = index;
				switch (index) {
					case 0:
						this.getList()
						break
					case 1:
						this.getList(0)
						break
					case 2:
						this.getList(1)
						break
					case 3:
						this.getList(20)
						break
					case 4:
						this.getList(-3)
						break
				}
			},
			search(keyword) {
				this.pageIndex = 1;
				this.mysearch = keyword;
				switch (this.tabIdx) {
					case 0:
						this.getList()
						break
					case 1:
						this.getList(0)
						break
					case 2:
						this.getList(1)
						break
					case 3:
						this.getList(20)
						break
					case 4:
						this.getList(-3)
						break
				}
			},
			//删除
			deleteOrder(item) {
				this.$api.get('/api/scenic/delOrder/' + item.orderCode).then((res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.data,
							icon: 'success',
							duration: 2000,
							success() {

							},
						});
						this.getList()
					} else {
						uni.showToast({
							title: res.data.data,
							icon: 'none',
							duration: 2000,
							success() {},
						});
						this.getList()
					}
				})
			},
			//再次预订
			againReserve(item) {
				uni.redirectTo({
					url: '/pagesTrip/scenicSpots/index'
				})
			},
			//取消订单
			cancelOrder(item) {
				this.$api.get('api/scenic/cancelOrder/' + item.orderCode).then(res => {
					if (res.data.code == 0) {
						this.$showToast('取消成功');
						setTimeout(() => {
							switch (this.tabIdx) {
								case 0:
									this.getList()
									break
								case 1:
									this.getList(0)
									break
								case 2:
									this.getList(1)
									break
								case 3:
									this.getList(20)
									break
								case 4:
									this.getList(-3)
									break
							}
						}, 1500)
					} else this.$showModal(res.data.msg);
				})
			},
			//发票/报销
			invoice(item) {
				this.$showToast('正在开发中...')
			},
			//去支付
			toPay(item) {
				this.realityPay = item.realityPay
				this.orderId = item.orderCode
				this.lsKey = 'toPay';
				this.confrimPay();
			},
			confrimPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						if (res.data.appId) {
							this.$wxPay(res.data).then(result => {
								uni.navigateTo({
									url: `${'/pagesTrip/scenicSpots/paySuccess?orderId='+this.orderId+'&realityPay='+this.realityPay}`
								})
							})
						} else if (res.data.code && res.data.code != 0) {
							this.$showModal(res.data.msg);
						}
					} else this.$showModal(res.data.msg);
				})
			},
			scrolltolower() {
				// if (!this.moreData) return;
				// this.getList();
			},
			// getList() {
			// 	this.$api.get('/api/scenic/selectOrderPage', {
			// 			openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
			// 			page: 1,
			// 			limit: 999,
			// 			condition: this.mysearch,
			// 		})
			// 		.then(res => {
			// 			this.orderList = res.data.data.ticketOrderList
			// 		})
			// },
			getList(index) {
				let status = index;
				if (status === undefined) {
					status = '';
				}
				this.$api.get('/api/scenic/selectOrderPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						page: this.pageIndex,
						limit: this.pageCount,
						status: status,
						condition: this.mysearch,
					})
					.then(res => {
						if (res.data.code == 0) {
							this.orderList = res.data.data.ticketOrderList;
							this.orderList.forEach(o => {
								if (o.status == 0) {
									let diffMS = Date.parse(new Date()) - Date.parse(new Date(o.orderTime));
									if (diffMS < this.$gqTime) o.djsTime = this.$gqTime - diffMS -
									1000; //提前一秒，便于取消刷新
								}
							})
						}
					})
			},
			refund(item) {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/refund?id=' + item.orderCode
				})
			},
			orderDetail(item) {
				uni.navigateTo({
					url: '/pagesTrip/scenicSpots/orderDetail?orderCode=' + item.orderCode + '&status=' + item
						.status
				})
			},
			changeStatus(index) {
				this.tabIdx = index;
				switch (index) {
					case 0:
						this.getList()
						break
					case 1:
						this.getList(0)
						break
					case 2:
						this.getList(1)
						break
					case 3:
						this.getList(20)
						break
					case 4:
						this.getList(-3)
						break
				}
			},
			search(keyword) {
				this.pageIndex = 1;
				this.mysearch = keyword;
				switch (this.tabIdx) {
					case 0:
						this.getList()
						break
					case 1:
						this.getList(0)
						break
					case 2:
						this.getList(1)
						break
					case 3:
						this.getList(20)
						break
					case 4:
						this.getList(-3)
						break
				}
			},

			// 确定删除
			confirmed() {
				let id = this.delId
				this.$api.get('/api/scenic/delOrder/' + id).then((res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: res.data.data,
							icon: 'success',
							duration: 2000,
							success() {

							},
						});
						this.showdelete = false


						this.getList()
					} else {
						uni.showToast({
							title: res.data.data,
							icon: 'none',
							duration: 2000,
							success() {},
						});
						this.getList()
					}
				})




			},
			// 取消
			cancel() {
				this.showdelete = false
			},
			//删除
			deleteOrder(item) {

				this.showdelete = true
				this.delId = item.orderCode


			},
			//再次预订
			againReserve(item) {
				uni.redirectTo({
					url: '/pagesTrip/scenicSpots/index'
				})
			},
			//取消订单
			cancelOrder(item) {
				this.$api.get('api/scenic/cancelOrder/' + item.orderCode).then(res => {
					if (res.data.code == 0) {
						this.$showToast('取消成功');
						setTimeout(() => {
							switch (this.tabIdx) {
								case 0:
									this.getList()
									break
								case 1:
									this.getList(0)
									break
								case 2:
									this.getList(1)
									break
								case 3:
									this.getList(20)
									break
								case 4:
									this.getList(-3)
									break
							}
						}, 1500)
					} else this.$showModal(res.data.msg);
				})
			},
			//发票/报销
			invoice(item) {
				this.$showToast('正在开发中...')
			},
			//去支付
			toPay(item) {
				this.realityPay = item.realityPay
				this.orderId = item.orderCode
				this.lsKey = 'toPay';
				this.confrimPay();
			},
			confrimPay(item) {
				this.$api.post('/order/icbc/createOrder', {
					orderCode: this.orderId,
					tradeType: 'JSAPI',
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId
				}, false).then(res => {
					if (res.statusCode == 200 && res.data != null) {
						this.payShow = false;
						this.$wxPay(res.data).then(result => {
							uni.navigateTo({
								url: `${'/pagesTrip/scenicSpots/paySuccess?orderId='+this.orderId+'&realityPay='+this.realityPay}`
							})
						})
					}
				})
			},
			scrolltolower() {
				// if (!this.moreData) return;
				// this.getList();
			},
			// getList() {
			// 	this.$api.get('/api/scenic/selectOrderPage', {
			// 			openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
			// 			page: 1,
			// 			limit: 999,
			// 			condition: this.mysearch,
			// 		})
			// 		.then(res => {
			// 			this.orderList = res.data.data.ticketOrderList
			// 		})
			// },
			getList(index) {
				let status = index;
				if (status === undefined) {
					status = '';
				}
				this.$api.get('/api/scenic/selectOrderPage', {
						openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
						page: this.pageIndex,
						limit: this.pageCount,
						status: status,
						condition: this.mysearch,
					})
					.then(res => {
						if (res.data.code == 0) {
							this.orderList = res.data.data.ticketOrderList;
							this.orderList.forEach(o => {
								if (o.status == 0) {
									let diffMS = Date.parse(new Date()) - Date.parse(new Date(o.orderTime));
									if (diffMS < this.$gqTime) o.djsTime = this.$gqTime - diffMS -
										1000; //提前一秒，便于取消刷新
								}
							})
						}
					})
			},
			finish(item) {
				this.$api.get('api/scenic/cancelOrder/' + item.orderCode).then(res => {
					if (res.data.code == 0) {
						setTimeout(() => {
							this.pageIndex = 1;
							this.orderList = [];
							switch (this.tabIdx) {
								case 0:
									this.getList()
									break
								case 1:
									this.getList(0)
									break
								case 2:
									this.getList(1)
									break
								case 3:
									this.getList(20)
									break
								case 4:
									this.getList(-3)
									break
							}
						}, 500)
					} else this.$showModal(res.data.msg);
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.orders {
		display: flex;
		align-items: center;

		&.empty {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		::v-deep .u-list-item {
			width: 100%;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 36rpx 24rpx 24rpx;
			box-sizing: border-box;

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #999;
						line-height: 28rpx;
						margin-left: 20rpx;
					}
				}

				.right {
					text-align: right;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 37rpx;

					text {
						color: #999;
					}
				}
			}

			.content {
				padding: 22rpx 0 24rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;
				background: #fff;

				.title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 45rpx;
				}

				.date {
					display: flex;
					align-items: center;
					margin-top: 22rpx;

					&>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 24rpx;

						&:nth-child(1) {
							margin-right: 20rpx;
							letter-spacing: 2rpx;
						}
					}
				}

				.room_price {
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;

					.room {
						display: flex;
						align-items: center;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;
						}
					}

					.price {
						text {}
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					margin: 24rpx 0 0 24rpx;
					width: 148rpx;
					height: 56rpx;
					// border: 1rpx solid #EFEFEF;
					border-radius: 16rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					// font-weight: 400;
					// color: #333333;
					color: #333333;
					background-color: #F6F6F6;
				}
			}

			&:last-child {
				margin-bottom: 40rpx;
			}
		}
	}

	.qx {
		color: #AAAAAA !important;
	}

	.s0 {
		color: #feb000 !important;
	}

	.s1 {
		color: #333 !important;
	}
</style>